$(function () {

    if (localStorage.getItem('goods')) {
        //本地存储的数据
        var goodsArr = JSON.parse(localStorage.getItem('goods'))

        $.ajax({
            url: './data/goods.json',
            type: 'get',
            dataType: 'json',
            success: function (data) {

                $.each(data, function (index, item) {
                    $.each(goodsArr, function (ind, obj) {
                        if (item.id === obj.id) {
                            var goodsDom = `
        <li>
            <input type="checkbox" class="check">
            <img src="${item.imgurl}" alt="">
            <h3>${item.title}</h3>
            <span class="price">${item.price}</span>
            <span class="num" data-id="${item.id}" data-num="${obj.num}">
            <button class="btn1">-</button>
            <input type="text" value="${obj.num}" class="shuliang">
            <button class="btn2">+</button>
            </span>
            <span class="del" data-id = "${item.id}">删除</span>
        </li>
                            `
                            $('.list').append(goodsDom)
                        }
                    })
                })
            }
        })


    } else {
        var liDom = '<li class="wu">购物车暂无数据！</li>'
        $('.list').html(liDom)
    }
    var todolist = {
        init: function () {
            this.catchElement()
            this.bindEvent()
        },
        catchElement: function () {
            this.all = $('.all')
            this.list = $('.list')
            this.btn1 = $('.btn1')
            this.btn2 = $('.btn2')

        },
        bindEvent: function () {
            var _this = this
            this.all.click(function () {
                if ($(this).prop('checked')) {
                    $('.check').prop('checked', true)
                } else {
                    $('.check').prop('checked', false)
                }
            })

            this.list.on('click', '.check', function () {
                //判断所有任务是否全部选中
                $('.check').each(function (index, dom) {
                    if (!$(dom).prop('checked')) {
                        _this.all.prop('checked', false)
                        return false
                    }
                    _this.all.prop('checked', true)
                })
            })

            //删除购物车数据
            this.list.on('click', '.del', function () {

                //获取要删除的商品的id 
                var id = $(this).attr('data-id')

                $(this).parent().remove()

                $('.check').each(function (index, dom) {
                    if (!$(dom).prop('checked')) {
                        _this.all.prop('checked', false)
                        return false
                    }
                    _this.all.prop('checked', true)
                })


                //遍历
                $.each(goodsArr, function (index, item) {

                    if (item.id === id) {
                        goodsArr.splice(index, 1)
                        return false
                    }
                })

                if (goodsArr.length > 0) {
                    localStorage.setItem('goods', JSON.stringify(goodsArr))
                } else {
                    localStorage.removeItem('goods')
                    var liDom = '<li class="wu">购物车暂无数据！</li>'
                    $('.list').html(liDom)
                    _this.all.prop('checked', false)
                }

                alert('商品移出购物车成功!')
            })


            $('.list ').on('click', '.num .btn1', function () {
                var _this = this
                console.log(1)
                var num = $(this).parent().attr('data-num')
                var id = $(this).parent().attr('data-id')

                $.each(goodsArr, function (index, item) {

                    if (item.id === id) {
                        item.num--
                        num = item.num

                        $(_this).next('.shuliang').attr('value', num)
                    }
                })
                localStorage.setItem('goods', JSON.stringify(goodsArr))

            })
            $('.list ').on('click', '.num .btn2', function () {
                var _this = this
                console.log(1)
                var num = $(this).parent().attr('data-num')
                var id = $(this).parent().attr('data-id')

                $.each(goodsArr, function (index, item) {

                    if (item.id === id) {
                        item.num++
                        num = item.num
                        $(_this).prev('.shuliang').attr('value', num)
                    }
                })
                localStorage.setItem('goods', JSON.stringify(goodsArr))

            })


        }
    }
    todolist.init()
   
})